<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    
    <!--
        图片标签用于在网页中插入外部的图片
        使用img标签引入外部图片，img标签是一个自结束标签
        属性：
            src 属性指定的是外部图片的地址（路径规则和超链接一样）
            alt 默认不显示，图片不存在时显示的文字说明，不是所有浏览器都会支持 
                另外，搜索引擎也会根据alt中的名称来搜索
            
            width 图片的宽度
            height 图片的高度
                - 宽度和高度只改了一个，另一个会自适应
            
            注意：在pc端一般不建议调整图片的大小，需要多大的图片就使用多大的，让UI出好图
            但是在移动端，经常需要进行缩放，大图片缩小

        图片的格式：
            jpeg(jpg)
                - 支持的颜色丰富，不支持透明效果，不支持动图
                - 一般用来显示照片
            gif
                - 支持的颜色比较少，支持简单透明，支持动图
                - 颜色单一，动图
            png 
                - 支持的颜色丰富，支持复杂透明，不支持动图
                - 颜色丰富，复杂透明效果（专为网页而生）
            webp
                - 这种格式是谷歌新推出的专门用来表示网页的图片的一种格式
                - 它具备了上面图片的所有优点，而且文件还特别的小
                - 缺点：兼容性不好

            效果一样，用小的
            效果不一样，用效果好的
    -->

    <img width="300px" src="https://img-blog.csdnimg.cn/20210705131304162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4bGhsamg=" alt="">

    <img width="300px" src="img/1.jpg" alt="测试">

    <div>测试</div>

    <img src="" alt="">

</body>
</html>